/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../mixins';
@import '../colors';
@import '../../Sidecar/_mixins';
@import '../../common/stippling';
@import '../../common/_narrow-window';

.kui--bar-wrapper {
  display: flex;
  height: var(--bar-height);
  min-width: 25rem;
  position: relative;
  background-color: $table-background-color;
  border: none;
}

.kui--sequence-diagram {
  .kui--interval-start + tr .kui--bar-wrapper {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }
  tr.kui--sequence-diagram-last-row-in-interval .kui--bar-wrapper {
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }
}

@include narrow-window {
  .kui--bar-wrapper {
    min-width: 10rem;
  }
}

.kui--bar[data-overlay] {
  height: 100%;
  box-shadow: 1px 0 var(--color-base01);
}
.kui--bar[data-overlay='1'] {
  background: repeating-linear-gradient(
    -55deg,
    var(--color-latency-2),
    var(--color-latency-1) 2px,
    var(--color-latency-2) 2px,
    var(--color-latency-2) 8px
  );
  border: 1px solid var(--color-latency-0);
  filter: grayscale(0.125) opacity(0.9);
}
.kui--bar[data-overlay='0'] {
  background: var(--color-latency-0);
  top: calc(100% * 2 / 11);
  height: calc(100% * 7 / 11);
  filter: grayscale(0.1) opacity(0.2);
}

.kui--bar {
  position: absolute;
  top: 0;
  bottom: 0;

  &.clickable:hover {
    cursor: pointer;
  }

  &.kui--bar-default-color {
    background-color: var(--color-base05);
  }

  &.gray-background {
    background: $color-bg--bar-gray;
    color: $color-fg--bar-gray;
  }

  &.red-background {
    --color1: var(--color-light-red);
    --color2: var(--color-red);
    --color3: transparent;
    @include kui--crosshatch;
  }

  &.yellow-background {
    color: $color-fg--bar-yellow;
    background: $color-bg--bar-yellow;
  }

  &.green-background {
    color: $color-fg--bar-green;
    background: $color-bg--bar-green;
  }

  &.blue-background {
    color: $color-fg--bar-blue;
    background: $color-bg--bar-blue;
  }
}
